<template>
    <div v-if="show">
        <draggable
            v-model="widgetForm.list"
            @change="tucengChange"
        >
            <div class="tuceng" @click="tucengClick(index)" :class="{'activeTuceng': activeIndex==index}" v-for="(element,index) in widgetForm.list" :key="index">
                <i class="bg-text"/>
                {{ element.name }}

                <span @click.stop="handleWidgetDelete(index)" class="widget-action-delete">
                    删除
                </span>
                <span @click.stop="handleWidgetClone(index)" class="widget-action-clone">
                    复制
                </span>
            </div>
        </draggable>
    </div>
</template>
<script>
import Draggable from 'vuedraggable'
import deepClone from '@/utils/deepClone'
export default {
    components: {
        Draggable
    },
    props: ['data', 'selectDict', 'menuResult', 'widgetForm', 'activeIndex'],
    data() {
        return {
            activeRectIndex: this.activeIndex
        }
    },
    computed: {
        show() {
            if (this.data && Object.keys(this.data).length > 0) {
                return true
            }
            return false
        }
    },
    watch: {

    },
    methods: {
        tucengChange(data) {
            this.activeRectIndex = data.moved.newIndex
            this.$emit('activeIndex', data.moved.newIndex)
        },
        tucengClick(index) {
            this.$emit('activeIndex', index)
            this.activeRectIndex = index
        },
        handleWidgetDelete(index) {
            this.$nextTick(() => {
                this.widgetForm.list.splice(index, 1)
            })
        },
        handleWidgetClone(index) {
            let cloneData = {
                ...this.data,
                options: { ...this.data.options },
                key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
            }

            if (this.data.type === 'radio' || this.data.type === 'checkbox') {
                cloneData = {
                    ...cloneData,
                    options: {
                        ...cloneData.options,
                        options: cloneData.options.options.map(item => ({ ...item }))
                    }
                }
            }
            if (this.data.type === 'img' || this.data.type === 'title') {
                cloneData = {
                    ...cloneData,
                    options: {
                        ...cloneData.options,
                        style: { ...this.data.options.style }
                    }
                }
            }
            this.widgetForm.list = deepClone(this.widgetForm.list)
            this.widgetForm.list.splice(index, 0, cloneData)
            this.$nextTick(() => {
                this.selectWidget = this.widgetForm.list[index + 1]
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .tuceng{
        height: 40px;
        line-height: 40px;
        background: #fff;
        cursor: pointer;
        border-bottom: 1px solid #d6d6d6;
        font-size: 14px;
        padding: 0 15px;
        position: relative;
        .widget-action-clone,.widget-action-delete{
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #F56C6C;
        }
        .widget-action-clone{
            right: 50px;
            color: #67C23A;
        }
        &:hover{
            background: #f8f8f8;
        }
        .bg-text{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #f1f1f1;
            vertical-align: middle;
        }
    }
    .activeTuceng{
        background: #409EFF;
        color: #fff;
        &:hover{
            background: #409EFF;
        }
    }
</style>
